<template>
	<view class="farm-money-vison wf-box">
		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<view class="back" @click="back()">
					<image src="../../static/img/chat-09.png"></image>
				</view>
				<view class="title"></view>
				<view></view>
			</view>
		</view>

		<!-- <image class="farm-bg" src="../../static/img/farm-bg.png" mode="widthFix"></image> -->

		<view class="main" :style="{ paddingTop: navBarHeight }">

			<view class="life-savings-view">
				<view class="KT-left">
					<view class="name-view">
						<view class="name">
							KT活期宝
						</view>
						<view class="text">
							随时赎回，享受更高流动性
						</view>
					</view>
					<view class="savigs-view">

						<view class="">
							<view class="savigs-text">
								期限
							</view>
							<view class="savigs-value">
								{{lifeSavingsInfo.deadline}}
							</view>
						</view>
						<view class="">
							<view class="savigs-text">
								当前参考APY
							</view>
							<view class="savigs-value">
								{{lifeSavingsInfo.APY}}
							</view>
						</view>
					</view>
				</view>
				<view class="KT-ionc-view">
					<image class="KT-icon" src="../../static/img/farm-ionc1.png" mode="widthFix"></image>
				</view>
			</view>

			<view class="capital-view">
				<view class="title">
					当前进度
				</view>
				<progress :percent="lifeSavingsInfo.plan" border-radius="8" stroke-width="8" activeColor="#3F93FF" />
				<view class="bonus-view">
					<text class="plan">
						{{lifeSavingsInfo.plan}}
					</text>
					<text class="bonusTotal">
						奖池总量：{{lifeSavingsInfo.bonusTotal}}
					</text>
				</view>
				<view class="balance-view">
					<text class="KT-num-text">
						参与数量(KT)
					</text>
					<text class="balance">
						可用余额：{{lifeSavingsInfo.balance}}KT
					</text>
				</view>
				<view class="tips">
					1KT起投
				</view>
				<view class="participation-record">
					<view class="text">
						参与记录
					</view>
					<uni-icons type="right" size="12"></uni-icons>
				</view>
				
			</view>
			
			<view class="btn-view">
				<button class="KT-participant-btn">正在进行中</button>
			</view>


		</view>
	</view>
</template>

<script>
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				lifeSavingsInfo: {
					deadline: '活期',
					APY: '8%',
					plan: '10%',
					bonusTotal: 5000000,
					balance: 89
				}

			}
		},
		mixins: [navBarMixin],

		methods: {}
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;
		background: url('../../static/img/farm-bg.png') no-repeat;
		background-size: 100% 662rpx;

		.back {
			image {
				width: 20rpx;
				height: 37rpx;
			}
		}

		.head {
			position: fixed;
			z-index: 1;
			width: 100%;
			background: transparent;

			.head-np {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 96rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				.title {
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}
		
		.main {
			margin-top: 126rpx;
			padding: 0 30rpx;
		}
	}

	@mixin flex-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.farm-bg {
		width: 100%;
		// position: absolute;
	}



	.capital-view {
		// top: 460rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 30rpx;
		margin-top: 30rpx;
		// position: absolute;
		z-index: 2;

		.title {
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 24rpx;
		}

		.bonus-view {
			@include flex-between;
			height: 94rpx;
			font-size: 24rpx;
			color: #999999;
			border-bottom: 1rpx solid #EEEEEE;

			.plan {}

			.bonusTotal {}
		}

		.balance-view {
			@include flex-between;
			margin: 40rpx 0 20rpx;

			.KT-num-text {
				font-size: 28rpx;
				color: #333333;
			}

			.balance {
				font-size: 24rpx;
				color: #3F93FF;
			}
		}

		.tips {
			width: 100%;
			height: 84rpx;
			background: #F8F8F8;
			border-radius: 10rpx;
			font-size: 25rpx;
			color: #999999;
			line-height: 84rpx;
			box-sizing: border-box;
			padding-left: 30rpx;
		}

		.participation-record {
			@include flex-between;
			margin-top: 40rpx;

			.text {
				font-size: 28rpx;
				color: #333333;
			}
		}
	}
	
	.btn-view {
		padding: 0 50rpx;
		margin-top: 70rpx;
		.KT-participant-btn {
			height: 83rpx;
			background: #3F93FF;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			color: #fff;
		
		}
		
	}


	.life-savings-view {
		// width: 92%;
		// left: 4%;
		// top: 100rpx;
		background: #FFFFFF; 
		border-radius: 20rpx;
		box-sizing: border-box;

		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding: 30rpx;

		// position: absolute;
		// z-index: 2;

		.KT-left {
			.name-view {
				.name {
					font-size: 34rpx;
					color: #333333;
				}

				.text {
					font-size: 28rpx;
					margin: 24rpx 0 72rpx;
					color: #666666;
				}
			}

			.savigs-view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				.savigs-text {
					font-size: 24rpx;
					color: #666666;
					margin-bottom: 12rpx;
				}

				.savigs-value {
					font-weight: 500;
					font-size: 33rpx;
					color: #3F93FF;
				}
			}
		}

		.KT-ionc-view {


			.KT-icon {
				width: 240rpx;
				height: 216rpx;
			}
		}
	}

	::v-deep {
		.uni-progress-bar {

			border-radius: 8px !important;
			overflow: hidden;
		}
	}
</style>